﻿@page "/docs/extensions/markdown"

<DocsPageTitle>
    Markdown
</DocsPageTitle>

<DocsPageParagraph>
    The <Code>Markdown</Code> component allows you to edit markdown strings. The Blazorise <Code>Markdown</Code> is based on the <Blazorise.Link To="https://easy-markdown-editor.tk/" Target="Target.Blank">Easy MarkDown Editor</Blazorise.Link> JavaScript library.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MarkdownNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main Imports.razor add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ImportMarkdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static Files">
        Include CSS and JS links into your <Code>index.html</Code> or <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="StaticFilesMarkdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Example" />
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownExample" />
</DocsPageSection>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        For transforming markdown value into HTML we used an excellent <Blazorise.Link To="https://github.com/xoofx/markdig" Target="Target.Blank">Markdig</Blazorise.Link> library.
    </AlertDescription>
</Alert>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Value" Type="string" Default="null">
        Gets or sets the markdown value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ValueChanged" Type="EventCallback<string>" Default="Solid">
        An event that occurs after the markdown value has changed.
    </DocsAttributesItem>
</DocsAttributes>